<template>
  <div class="page-container">
    <el-container>
      <div :class="!btnList || btnList.length === 0 && !showQuery ? 'flex-div-mini' : 'flex-div'">
        <el-button type="primary" :icon="flexIcon" :class="!btnList || btnList.length === 0 && !showQuery ? 'flex-button-mini' : 'flex-button'" :title="flexTitle" @click="queryChange" />
      </div>
      <el-header :height="showQuery?'41px':'0'" class="query-header">
        <el-collapse-transition>
          <div v-show="showQuery">
            <span>角色名：</span>
            <el-input v-model="roleName" placeholder="请输入角色名" clearable class="mr-15 width-180" />
            <span>状态：</span>
            <el-select v-model="state" class="mr-15 width-160">
              <el-option value="" label="全部" />
              <el-option v-for="item in stateList" :key="item.dictId" :value="item.dictCode" :label="item.dictName" />
            </el-select>
            <QueryButton @query="query" @reset="reset" />
          </div>
        </el-collapse-transition>
      </el-header>
      <el-container>
        <el-header :height="!btnList || btnList.length === 0 ? '0px' : '43px'" class="operation-header">
          <OperationBtn :btn-list="btnList" @handleClickBtn="handleClickBtn" />
        </el-header>
        <el-main class="page-main">
          <el-table
            ref="simpleTable"
            v-loading="tableLoading"
            :data="tableData"
            border
            highlight-current-row
            :height="tableHeight"
            class="table-style"
            @row-click="rowClick"
          >
            <el-table-column label="选择" width="60px" align="center"><template slot-scope="{ row }"><el-radio v-model="tableRadio" :label="row" @click.native="rowClick"><i /></el-radio></template></el-table-column>
            <el-table-column prop="roleName" label="角色名称" min-width="40%" align="center" show-overflow-tooltip />
            <el-table-column prop="typeName" label="角色类型" min-width="30%" align="center" />
            <el-table-column prop="stateName" label="状态" width="65" align="center" />
          </el-table>
          <el-pagination
            :total="total"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            :current-page="currentPage"
            layout="total, sizes, prev, pager, next, jumper, slot"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
            <el-button class="refresh-button" icon="el-icon-refresh" title="刷新" @click="refresh" />
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog :visible.sync="addDlgVisible" :title="addDlgTitle" width="390px" :close-on-click-modal="false" class="add-dialog" @close="cancel('addForm')">
      <el-form ref="addForm" :model="addForm" :rules="formRule" class="add-form">
        <el-form-item prop="roleName">
          <span class="add-form-span">角色名称：</span>
          <el-input v-model="addForm.roleName" placeholder="角色名称" maxlength="30" show-word-limit clearable class="add-form-input" />
        </el-form-item>
        <el-form-item prop="type">
          <span class="add-form-span">角色类型：</span>
          <el-select v-model="addForm.type" placeholder="角色类型" clearable class="add-form-input">
            <el-option v-for="item in roleTypeList" :key="item.dictCode" :value="item.dictCode" :label="item.dictName" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel('addForm')">取消</el-button>
        <el-button plain type="primary" :disabled="addBtnDisable" @click="addRole">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible="userConfigDlgVisible" title="配置角色用户" class="user-config-dialog" :close-on-click-modal="false" width="480px" @close="userConfigDlgVisible=false">
      <span class="config-user-title" :title="configUserTitle">{{ configUserTitle }}</span>
      <transfer-form
        left-title="可选用户"
        right-title="已选用户"
        left-placeholder="输入用户"
        right-placeholder="输入用户"
        :operation-btn="configBtn"
        @leftInput="leftUser=$event,nameInput($event, 0)"
        @rightInput="rightUser=$event,nameInput($event, 1)"
        @add="userAdd(0)"
        @cancel="userAdd(1)"
      >
        <div slot="left-list">
          <el-button v-for="item in userList" :key="item.userId" :title="item.name" type="text" class="report-list" :class="buttonActive === item.userId ? 'active' : 'normal'" @click="listChoose(item, 0)">{{ item.name }}</el-button>
        </div>
        <div slot="right-list">
          <el-button v-for="item in selectedUser" :key="item.userId" :title="item.name" type="text" class="report-list" :class="buttonActive === item.userId ? 'active' : 'normal'" @click="listChoose(item, 1)">{{ item.name }}</el-button>
        </div>
      </transfer-form>
      <div slot="footer">
        <el-button @click="userConfigDlgVisible=false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="configMenuDlgVisible" title="配置角色菜单" :close-on-click-modal="false" class="config-role-menu-dialog" width="500px">
      <el-container>
        <el-header height="30px">
          <span class="config-user-title" :title="configUserTitle">{{ configUserTitle }}</span>
        </el-header>
        <el-main class="menu-config-main">
          <el-tree
            ref="menuTree"
            v-loading="treeLoading"
            :data="menuList"
            :props="treeProp"
            :default-checked-keys="menuChoosed"
            class="menu-config-tree"
            node-key="menuId"
            show-checkbox
            check-strictly
            default-expand-all
            check-on-click-node
            @check="menuCheckChange"
          >
            <span slot-scope="{ data }">
              <span v-if="data.grade === 2 && data.menuName.split('_').length > 1">{{ data.menuName.split('_')[1] }}</span>
              <span v-else>{{ data.menuName }}</span>
            </span>
          </el-tree>
        </el-main>
      </el-container>
      <div slot="footer">
        <el-button @click="configMenuDlgVisible=false;menuChoosed=[]">取消</el-button>
        <el-button plain type="primary" :disabled="configMenuDisable" @click="configRoleMenu">确定</el-button>
      </div>
    </el-dialog>
    <!-- 操作记录 -->
    <OperationDlg :show.sync="recordDlg" :record-table="recordTable" />
  </div>
</template>

<script>
import { QueryButton, OperationBtn, TransferForm, OperationDlg } from '../../components/index'
import common from '@/common/common'
import API from '@/utils/api/baseData/roleManage'
import publicAPI from '@/utils/api/public/public'
import { getDictData } from '@/common/getDictData'

export default {
  name: 'Role',
  components: { QueryButton, OperationBtn, TransferForm, OperationDlg },
  data() {
    return {
      roleName: '',
      state: '',
      stateList: [],
      tableData: [],
      tableRadio: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      addDlgTitle: '新增',
      formRule: {
        roleName: [{ required: true, message: '*请输入角色名称' }, { validator: common.validateForm().specialWord, trigger: ['blur', 'change'] }],
        type: [{ required: true, message: '*请选择角色类型' }]
      },
      addForm: {
        roleName: '',
        type: ''
      },
      roleTypeList: [],
      addDlgVisible: false,
      buttonActive: '',
      userList: [],
      selectedUser: [],
      userConfigDlgVisible: false,
      configUserTitle: '',
      hasConfig: 0,
      configMenuDlgVisible: false,
      menuList: [],
      treeProp: {
        label: 'menuName',
        children: 'childMenuInfoTreeSet'
      },
      menuChoosed: [],
      leftSearchData: '',
      rightSearchData: '',
      numberList: [],
      checkMenu: [],
      tableLoading: false,
      leftUser: '',
      rightUser: '',
      recordDlg: false,
      recordTable: [],
      flexTitle: '点击收起查询栏',
      flexIcon: 'el-icon-arrow-up',
      showQuery: true,
      tableHeight: '414',
      pageMainStyle: '',
      configBtn: [],
      addBtnDisable: false,
      configMenuDisable: false,
      treeLoading: false
    }
  },
  computed: {
    btnList() {
      return common.getBtn(this.$route.path)
    }
  },
  watch: {
    showQuery() {
      this.getTableHeight()
    },
    tableRadio(val) {
      const row = val && val.length !== 0 ? val : null
      this.$nextTick(() => {
        this.$refs.simpleTable.setCurrentRow(row)
      })
    }
  },
  created() {
    this.getTableData()
    getDictData({ dictType: 'ACTIVE_TYPE' }).then(res => {
      this.stateList = res
      if (this.stateList.length === 1) {
        this.state = this.stateList[0].dictCode
      }
    }) // 获取状态列表
    this.defaultAddForm = common.deepCopy(this.addForm)
  },
  mounted() {
    this.$nextTick(() => {
      this.getTableHeight()
    })
    window.addEventListener('resize', this.getTableHeight)
  },
  activated() {
    this.$refs.simpleTable.doLayout() // 重新计算表格布局，防止高度没占满就出现滚动条
  },
  destroyed() {
    window.removeEventListener('resize', this.getTableHeight)
  },
  methods: {
    // 获取表格高度
    getTableHeight: function() {
      this.tableHeight = common.getTableHeight(this.showQuery, this.btnList)
    },
    // 收缩、展示查询栏
    queryChange: function() {
      this.showQuery = !this.showQuery
      this.flexTitle = this.showQuery ? '点击收起查询栏' : '点击展开查询栏'
      this.flexIcon = this.showQuery ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    },
    // 刷新
    query: function() {
      this.currentPage = 1
      this.tableRadio = []
      this.getTableData()
    },
    // 重置
    reset: function() {
      this.roleName = ''
      this.state = ''
    },
    // 操作按钮点击事件
    handleClickBtn: function(val) {
      // 5.6 优化Switch=》对象属性判断法
      const data = {
        add: this.addDlg,
        update: this.addDlg,
        configUser: this.configUserDlg,
        enable: this.enable,
        forbidden: this.enable,
        configMenu: this.configMenuDlg,
        operationRecord: this.operationRecord
      }
      if (data.hasOwnProperty(val)) {
        data[val] && data[val](val)
      } else {
        this.$warnMsg('未配置此功能')
      }
      this.btnList.forEach(btn => {
        const btnUrl = btn.componentName.split('/')
        if (btnUrl[btnUrl.length - 1] === val) {
          this.configBtn = btn.childButtonMenuInfoTreeSet
        }
      })
    },
    // 表格行点击事件
    rowClick: function(row) {
      if (this.tableRadio === row) {
        this.tableRadio = []
      } else {
        this.tableRadio = row
      }
    },
    // 表格刷新
    refresh: function() {
      this.currentPage = 1
      this.getTableData()
    },
    // 打开新增、修改对话框
    addDlg: function(val) {
      this.addBtnDisable = false
      if (val === 'add') {
        this.addDlgTitle = '新增'
        this.addDlgVisible = true
        getDictData({ dictType: 'ROLE_TYPE' }).then(res => {
          this.roleTypeList = res
          if (this.roleTypeList.length === 1) {
            this.addForm.type = this.roleTypeList[0].dictCode
          }
        }) // 获取角色列表
      } else {
        const row = this.tableRadio
        if (row.length === 0) {
          this.$warnMsg('请选择要修改的角色')
        } else {
          this.addDlgTitle = '修改'
          this.addForm = Object.assign({}, row)
          this.addDlgVisible = true
          getDictData({ dictType: 'ROLE_TYPE' }).then(res => {
            this.roleTypeList = res
            if (this.roleTypeList.length === 1) {
              this.addForm.type = this.roleTypeList[0].dictCode
            }
          }) // 获取角色列表
        }
      }
    },
    // 新增、修改角色
    addRole: function() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.addBtnDisable = true
          if (this.addDlgTitle === '新增') {
            this.addForm['_csrf'] = sessionStorage._csrf
            API.addRoleAPI(this.addForm).then(response => {
              const res = response.data.data
              if (response.data.flag === 'success') {
                this.$successMsg('新增角色成功')
                this.cancel()
                this.getTableData()
              } else {
                this.$errorMsg(res)
                this.addBtnDisable = false
              }
            }).catch(error => {
              this.$errorMsg('' + error)
              this.addBtnDisable = false
            })
          } else {
            const { roleId } = this.tableRadio
            const { roleName, type } = this.addForm
            const params = { roleId, roleName, type, _csrf: sessionStorage._csrf }
            API.updateRoleAPI(roleId, params).then(response => {
              const res = response.data.data
              if (response.data.flag === 'success') {
                this.$successMsg('修改角色信息成功')
                this.getTableData()
                this.cancel()
              } else {
                this.$errorMsg(res)
                this.addBtnDisable = false
              }
            }).catch(error => {
              this.$errorMsg('' + error)
              this.addBtnDisable = false
            })
          }
        }
      })
    },
    // 清空表单
    cancel: function() {
      this.addForm = common.deepCopy(this.defaultAddForm)
      this.addDlgVisible = false
      this.$nextTick(() => {
        this.$refs.addForm.clearValidate()
      })
    },
    // 打开用户配置对话框
    configUserDlg: function() {
      const row = this.tableRadio
      if (row.length === 0) {
        this.$warnMsg('请选择要进行配置的角色')
      } else {
        this.userConfigDlgVisible = true
        this.buttonActive = ''
        this.configUserTitle = row.roleName
        this.nameInput(this.leftUser, 0)
        this.nameInput(this.rightUser, 1)
      }
    },
    // 选中可选用户
    listChoose: function(item, type) {
      this.buttonActive = item.userId
      this.hasConfig = type
    },
    // 添加、删除角色用户
    userAdd: function(type) {
      const { tableRadio: row, buttonActive, hasConfig } = this
      if (buttonActive === '') {
        this.$warnMsg('请选择要配置的用户')
      } else {
        const label = type === 0 ? '添加' : '删除'
        if (hasConfig !== type) {
          this.$warnMsg('请选择要' + label + '的用户')
        } else {
          const params = {
            roleId: row.roleId,
            userId: buttonActive,
            hasConfig,
            _csrf: sessionStorage._csrf
          }
          this.userConfig(params)
        }
      }
    },
    userConfig: function(params) {
      API.configUserRoleAPI(params).then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          this.$successMsg('配置成功')
          this.buttonActive = ''
          const { leftUser, rightUser } = this
          this.nameInput(leftUser, 0)
          this.nameInput(rightUser, 1)
        } else {
          this.$errorMsg(res)
        }
      }).catch(error => { this.$message.error('' + error) })
    },
    // 获取用户列表
    getTableData: function() {
      this.tableLoading = true
      const { roleName, state, currentPage, pageSize } = this
      const params = {
        roleName,
        state,
        page: currentPage,
        rows: pageSize
      }
      API.roleTableDataAPI(params).then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          this.tableData = res.content
          this.total = res.total
          this.tableData.forEach(row => {
            if (row.roleId === this.tableRadio.roleId) {
              this.tableRadio = row
              return
            }
          })
        } else {
          this.$errorMsg(res)
        }
        this.tableLoading = false
      }).catch(error => {
        this.$errorMsg('' + error)
        this.tableLoading = false
      })
    },
    // 获取可选和已选用户列表
    getUserList: function(type) {
      const { tableRadio: row } = this
      const params = {
        roleId: row.roleId,
        name: row.name,
        hasConfig: type
      }
      API.configUserListAPI(params).then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          if (type === 0) {
            this.userList = res.content
          } else {
            this.selectedUser = res.content
          }
        } else {
          this.$errorMsg(res)
        }
      }).catch(error => { this.$errorMsg('' + error) })
    },
    nameInput: function(data, hasConfig) {
      const { tableRadio: row } = this
      const params = {
        roleId: row.roleId,
        name: data,
        hasConfig
      }
      API.configUserListAPI(params).then(response => {
        const res = response.data.data.content
        if (response.data.flag === 'success') {
          if (hasConfig === 0) {
            this.userList = res
          } else {
            this.selectedUser = res
          }
        } else {
          this.$errorMsg(res)
        }
      }).catch(error => { this.$errorMsg('' + error) })
    },
    // 启用、禁用
    enable: function(val) {
      const row = this.tableRadio
      const rowState = row.state ? '启用' : '禁用'
      const label = val === 'enable' ? '启用' : '禁用'
      if (row.length === 0) {
        this.$warnMsg('请选择要' + label + '的角色')
      } else {
        if (rowState === label) {
          this.$errorMsg(label + '失败，该角色已经是' + label + '状态')
        } else {
          const params = {
            roleId: row.roleId,
            _csrf: sessionStorage._csrf
          }
          API.roleEnableAPI(val, params).then(response => {
            const res = response.data.data
            if (response.data.flag === 'success') {
              this.$successMsg('角色"' + row.roleName + '"' + label + '成功')
              // 重置页码
              if ((this.state === '1' && val === 'forbidden') || (this.state === '0' && val === 'enable')) {
                const totalPage = Math.ceil((this.total - 1) / this.pageSize)
                const currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = currentPage < 1 ? 1 : currentPage
              }
              this.getTableData()
            } else {
              this.$errorMsg(res)
            }
          }).catch(error => { this.$errorMsg('' + error) })
        }
      }
    },
    // 打开配置角色菜单对话框
    configMenuDlg: function() {
      this.configMenuDisable = false
      const row = this.tableRadio
      if (row.length === 0) {
        this.$warnMsg('请选择要配置菜单的角色')
      } else {
        this.configUserTitle = row.roleName
        this.configMenuDlgVisible = true
        this.getRoleMenuList()
      }
    },
    // 获取角色菜单列表
    getRoleMenuList: function() {
      this.treeLoading = true
      const { roleId } = this.tableRadio
      API.roleMenuAPI({ roleId }).then(response => {
        const res = response.data.data
        if (response.data.flag === 'success') {
          this.menuList = res
          const menuChoosed = this.getCheckMenus(res)
          this.menuChoosed = Array.from(new Set(menuChoosed))
        } else {
          this.$errorMsg(res)
        }
        this.treeLoading = false
      }).catch(error => {
        this.$errorMsg('' + error)
        this.treeLoading = false
      })
    },
    getCheckMenus: function(list) {
      function fn(list) {
        let arr = []
        list.forEach(val => {
          if (val.childMenuInfoTreeSet.length !== 0) {
            arr = arr.concat(fn(val.childMenuInfoTreeSet))
          }
          if (val.isChoose === 1) {
            arr.push(val.menuId)
          }
        })
        return arr
      }
      return fn(list)
    },
    // 选择菜单
    menuCheckChange(data, checks) {
      this.$forceUpdate()
      const menuChoosed = checks.checkedKeys
      if (data.grade !== 0 && checks.checkedKeys.indexOf(data.parentId) === -1) { // 判断选择的是子节点且父节点未选中
        if (data.grade === 1) {
          menuChoosed.push(data.parentId)
        } else if (data.grade === 2) {
          let menuFlag = {}
          this.menuList.forEach(menu1 => {
            menu1.childMenuInfoTreeSet.forEach(menu2 => {
              if (menu2.menuId === data.parentId) {
                menuFlag = menu2
                menuChoosed.push(menu2.menuId)
              }
            })
            if (menu1.menuId === menuFlag.parentId) {
              menuChoosed.push(menu1.menuId)
            }
          })
        } else {
          let menuFlag = {}
          this.menuList.forEach(menu1 => {
            menu1.childMenuInfoTreeSet.forEach(menu2 => {
              menu2.childMenuInfoTreeSet.forEach(menu3 => {
                if (menu3.menuId === data.parentId) {
                  menuFlag = menu3
                  menuChoosed.push(menu3.menuId)
                }
              })
              if (menu2.menuId === menuFlag.parentId) {
                menuFlag = menu2
                menuChoosed.push(menu2.menuId)
              }
            })
            if (menu1.menuId === menuFlag.parentId) {
              menuChoosed.push(menu1.menuId)
            }
          })
        }
      }
      if (menuChoosed.indexOf(data.menuId) === -1) { // 取消选中
        if (data.grade === 2) {
          data.childMenuInfoTreeSet.forEach(menu2 => {
            if (menuChoosed.indexOf(menu2.menuId) !== -1) {
              menuChoosed.splice(menuChoosed.indexOf(menu2.menuId), 1)
            }
          })
        } else if (data.grade === 1) {
          data.childMenuInfoTreeSet.forEach(menu2 => {
            if (menuChoosed.indexOf(menu2.menuId) !== -1) {
              menuChoosed.splice(menuChoosed.indexOf(menu2.menuId), 1)
              menu2.childMenuInfoTreeSet.forEach(menu1 => {
                if (menuChoosed.indexOf(menu1.menuId) !== -1) {
                  menuChoosed.splice(menuChoosed.indexOf(menu1.menuId), 1)
                }
              })
            }
          })
        } else if (data.grade === 0) {
          data.childMenuInfoTreeSet.forEach(menu2 => {
            if (menuChoosed.indexOf(menu2.menuId) !== -1) {
              menuChoosed.splice(menuChoosed.indexOf(menu2.menuId), 1)
              menu2.childMenuInfoTreeSet.forEach(menu1 => {
                if (menuChoosed.indexOf(menu1.menuId) !== -1) {
                  menuChoosed.splice(menuChoosed.indexOf(menu1.menuId), 1)
                  menu1.childMenuInfoTreeSet.forEach(menu0 => {
                    if (menuChoosed.indexOf(menu0.menuId) !== -1) {
                      menuChoosed.splice(menuChoosed.indexOf(menu0.menuId), 1)
                    }
                  })
                }
              })
            }
          })
        }
      }
      this.menuChoosed = Array.from(new Set(menuChoosed))
      this.$refs.menuTree.setCheckedKeys(this.menuChoosed)
    },
    // 提交配置角色菜单
    configRoleMenu: function() {
      if (this.menuChoosed.length === 0) {
        this.$warnMsg('请勾选要配置的菜单')
      } else {
        this.configMenuDisable = true
        const params = {
          roleId: this.tableRadio.roleId,
          menuIds: this.menuChoosed,
          _csrf: sessionStorage._csrf
        }
        API.configMenuRoleAPI(params).then(response => {
          const res = response.data.data
          if (response.data.flag === 'success') {
            this.menuChoosed = []
            this.$successMsg('角色"' + this.tableRadio.roleName + '"配置菜单成功')
            this.configMenuDlgVisible = false
          } else {
            this.$errorMsg(res)
            this.configMenuDisable = false
          }
        }).catch(error => {
          this.$errorMsg('' + error)
          this.configMenuDisable = false
        })
      }
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    handleSizeChange: function(val) {
      this.pageSize = val
      setTimeout(() => { this.getTableData() }, 0)
    },
    // 操作记录
    operationRecord: function() {
      const row = this.tableRadio
      if (row === null || row.length === 0) {
        this.$warnMsg('请选择要查看操作记录的数据')
      } else {
        this.recordDlg = true
        publicAPI.operationDataAPI({ dataId: row.roleId }).then(response => {
          this.recordTable = response.data.content
        }).catch(error => { this.$errorMsg(error) })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.query-header {
  div:nth-child(1) {
    padding-top: 7px;
  }
  min-width: 750px;
  transition: 0.5s;
}
.operation-header {
  line-height: 43px;
  border-bottom: solid 1px #c1defa;
  min-width: 670px;
}
.page-main {
  padding: 5px 5px 0px 5px;
}
.add-form-span {
  display: inline-block;
  width: 90px;
}
.add-form-input {
  width: 200px;
}
.config-user-title {
  display: inline-block;
  width: 100%;
  height: 30px;
  font-size: 17px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.report-list {
  width: 100%;
  margin: 0.5px 0px;
  border-radius: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: 5px 5px;
}
.active {
  background-color: #6fb0e6;
  color: white;
}
.normal {
  color: #44484bc4;
}
.menu-config-main {
  border: solid 1px rgb(193, 222, 250);
  padding: 5px 10px;
}
.menu-config-tree {
  height: 380px;
}
.flex-div {
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  position: absolute;
  right: 10px;
  z-index: 1000; // wsq 查询栏收缩按钮悬浮到上层，解决收起查询栏时按钮被覆盖的问题
  transition: 0.5s;
}
.flex-button {
  padding: 0;
  width: 36px;
  height: 36px;
  transition: 0.5s;
}
.flex-div-mini {
  width: 36px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  position: absolute;
  right: 10px;
  z-index: 1000; // wsq 查询栏收缩按钮悬浮到上层，解决收起查询栏时按钮被覆盖的问题
}
.flex-button-mini {
  padding: 0;
  width: 36px;
  height: 18px;
}
.flex-div:hover {
  background-color: rgba(167, 210, 255, 0.267);
  border-radius: 6px;
}
.table-style {
  transition: 0.5s;
}
</style>
<style lang="scss">
.add-dialog {
  .el-dialog__body {
    padding: 15px 0px 0px 35px;
  }
}
.add-form .el-form-item__error {
  margin-left: 95px;
}
.user-config-dialog {
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .el-dialog__footer {
    padding-top: 5px;
  }
}
.report-list:hover,
.report-list:focus {
  background-color: #6fb0e6;
  color: aliceblue;
}
.config-role-menu-dialog {
  .el-dialog__body {
    padding-top: 3px;
    padding-bottom: 2px;
  }
  .el-checkbox__input ::after {
    transition: none!important;
  }
}
.el-tree-node__content>.el-tree-node__expand-icon {
  transition: none; // 消除树形列表展开时抖动
}
</style>
